<template>
  <div class="container">
    <div class="image-container">
      <div class="my-carousel">
        <el-carousel trigger="click" :autoplay="false" ref="carousel"
                     height="450px" @change="getIndex()">
          <el-carousel-item v-for="(image, index) in imageUrlList" :key="index"
                            style="background: transparent !important;">
            <div style="justify-content: center;display: flex; align-items: center">
              <img :src="image.url" alt="Image"
                   style="height: 500px; width: auto;">
            </div>
          </el-carousel-item>
        </el-carousel>
        <div>
          <el-button icon="el-icon-arrow-left" circle @click="prevPage" class="prev-button"></el-button>
          <img v-for="(image, index) in this.thumbnailImages" :key="index" :src="image.url"
               @click="switchImage(index)" alt=""
               class="thumbnail">
          <el-button icon="el-icon-arrow-right" circle @click="nextPage" class="next-button"></el-button>
        </div>
      </div>
    </div>
    <div class="text-container">
      <el-descriptions title="活动详情" :column=2 class="description1" label-color="red" border >
        <el-descriptions-item label="活动名称" label-class-name="my-label" >
          {{ this.activityInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="活动类型" >
          <template>
            <el-tag v-if="this.activityInfo.type === 1" size="small">线上活动</el-tag>
            <el-tag v-else-if="this.activityInfo.type === 2" size="small">校内活动</el-tag>
            <el-tag v-else-if="this.activityInfo.type === 3" size="small">校外活动</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="报名时间" >
          {{this.activityInfo.activitySignStartTime}} -- {{this.activityInfo.activitySignEndTime}}</el-descriptions-item>
        <el-descriptions-item label="活动时间">
          {{this.activityInfo.activityConStartTime}} -- {{this.activityInfo.activityConEndTime}}</el-descriptions-item>
        <el-descriptions-item label="活动详情" >
          <div v-html="this.activityInfo.activityDescription"></div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="活动规则" :column=2 class="description2" border>
        <el-descriptions-item label="活动举办地" >{{this.actOtherInfo1.schoolName}}</el-descriptions-item>
        <el-descriptions-item label="活动参与人群" >
          <template>
            <el-tag v-if="this.actOtherInfo1.people === 0" size="small" type="success">教师和学生</el-tag>
            <el-tag v-else-if="this.actOtherInfo1.people === 1" size="small" type="success">仅教师</el-tag>
            <el-tag v-else-if="this.actOtherInfo1.people === 2" size="small" type="success">仅学生</el-tag>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="活动参与人群地区限制" span="2" >
          {{this.actOtherInfo1.province + this.actOtherInfo1.city}}</el-descriptions-item>
        <el-descriptions-item label="活动规则详情" >{{this.actOtherInfo1.details}}</el-descriptions-item>
      </el-descriptions>
      <template v-if="this.card === 1" >
        <el-row :gutter="3" style="margin-top: 15px">
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center">
              <span>🚩离报名开始还有</span><br>
              <span style="font-size: 30px">{{this.day}}天</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center">
              <i class="el-icon-star-on" style="color:red; font-size: 18px"></i>
              <span>报名名额共</span><br>
              <span style="font-size: 30px">{{this.activityInfo.activityMaxNum}}个</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center">
              <i class="el-icon-medal" style="color:gold; font-size: 18px"></i>
              <span>成绩要求</span><br>
              <span style="font-size: 30px">{{this.actOtherInfo1.grade}}</span>
            </el-card>
          </el-col>
        </el-row>
        <el-button @click="signUp()" class="button0" type="success" plain disabled>前往报名</el-button>
      </template>
      <template v-else-if="this.card === 2" >
        <el-row :gutter="9" style="margin-top: 15px">
          <el-col :span="11">
            <el-card  shadow="hover" style="width: 290px;text-align: center">
              <span>🚩离报名结束还有</span><br>
              <span style="font-size: 30px">{{this.day}}天{{this.hour}}小时{{this.minute}}分</span>
            </el-card>
          </el-col>
          <el-col :span="7">
            <el-card  shadow="hover" style="width: 180px;text-align: center">
              <i class="el-icon-star-on" style="color:red; font-size: 18px"></i>
              <span>活动名额还剩</span><br>
              <span style="font-size: 30px">{{this.activityInfo.activityMaxNum - this.activityInfo.activityNum}}个</span>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card  shadow="hover" style="width: 140px;text-align: center">
              <i class="el-icon-medal" style="color:gold; font-size: 18px"></i>
              <span>成绩要求</span><br>
              <span style="font-size: 30px">{{this.actOtherInfo1.grade}}</span>
            </el-card>
          </el-col>
        </el-row>
        <el-button @click="signUp()" class="button0" type="success" plain v-if="this.userType===1||this.userType===2">前往报名</el-button>
        <el-button @click="signUp()" class="button0" type="success" plain v-else disabled>前往报名</el-button>
      </template>
      <template v-else-if="this.card === 3">
        <el-row :gutter="3" style="margin-top: 15px">
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center;background-color: transparent;border: none">
              <span>🚩离活动开始还有</span><br>
              <span style="font-size: 30px">{{this.day}}天</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center;background-color: transparent;border: none">
              <span>活动参与男女比例</span><br>
              <span style="font-size: 30px">{{this.maleNum}}/{{this.femaleNum}}</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card  shadow="hover" style="width: 200px;text-align: center;background-color: transparent;border: none">
              <span>活动总人数</span><br>
              <span style="font-size: 30px">{{this.activityInfo.activityNum}}</span>
            </el-card>
          </el-col>
        </el-row>
        <el-button @click="signUp()" class="button0" type="success" plain disabled>前往报名</el-button>
      </template>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="个人信息" @close="resetForm">
      <el-form ref="personalForm" :model="personalInfo" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="this.userAccount" :disabled="true" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="选择学校">
          <el-select v-model="selectedSchool" placeholder="请选择学校">
            <el-option
                v-for="school in joinMiddleSchool"
                :key="school.id"
                :label="school.sname"
                :value="school.sname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择地区">
          <el-cascader
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions"
              @change="insertStudentLocation(selectedOptions)"
          >
          </el-cascader>

        </el-form-item>
        <!-- 其他个人信息表单字段 -->
        <!-- ... -->
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getActivityById, getActivityRule, getImageByAid, getUserNum} from '../../../../api/activityUrl'
import {mapGetters} from 'vuex'
import { pcaTextArr } from 'element-china-area-data'
import {Join} from '../../../../api/activity'
import {insertStudentSchool} from '../../../../api/user'
import {insertStudentLocation} from '../../../../api/api'
import {joinMiddleSchool} from '../../../../api/middle'
// import * as echarts from 'echarts'

export default {
  name: 'activity',
  inject: ['reload'],
  data () {
    return {
      selectedActivity: null,
      personalInfo: { // 存储个人信息的对象
        name: ''
        // 根据需要添加其他个人信息字段
      },
      joinMiddleSchool: [],
      imageUrlList: [],
      receivedAid: 0,
      currentPage: 0,
      currentIndex: 0,
      pageSize: 3,
      totalPage: '',
      thumbnailImages: [],
      activityInfo: {},
      actOtherInfo1: {},
      card: 0,
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
      userList: [],
      genderTable: [],
      maleNum: 0,
      femaleNum: 0,
      dialogVisible: false,
      selectedSchool: '',
      pcaTextArr,
      selectedOptions: [],
      studentLocation: {},
      customLabelWidth: '120px' // 或者你想要的具体宽度值
    }
  },
  methods: {
    getIndex (val) {
      this.currentPage = Math.floor(val / this.pageSize)
      this.thumbnail()
    },
    getImageByAid () {
      getImageByAid(this.receivedAid).then((res) => {
        this.imageUrlList = res
        this.totalPage = Math.floor(this.imageUrlList.length / this.pageSize) + 1
        this.thumbnail()
      })
    },
    switchImage (index) {
      this.currentIndex = index + (this.pageSize * this.currentPage)
      this.$refs.carousel.setActiveItem(this.currentIndex)
    },
    nextPage () {
      this.currentPage = (this.currentPage + 1) % this.totalPage
      this.thumbnail()
    },
    prevPage () {
      if (this.currentPage === 0) {
        this.currentPage = this.totalPage - 1
      } else {
        this.currentPage = this.currentPage - 1
      }
      this.thumbnail()
    },
    thumbnail () {
      const start = this.currentPage * this.pageSize
      let end = 0
      if (start + this.pageSize > this.imageUrlList.length) {
        end = this.imageUrlList.length
      } else {
        end = start + this.pageSize
      }
      this.thumbnailImages = []
      for (let i = start; i < end; i++) {
        this.thumbnailImages.push(this.imageUrlList[i])
      }
      return this.thumbnailImages
    },
    getActivityInfo () {
      getActivityById(this.receivedAid).then((res) => {
        this.activityInfo = res
        this.activityInfo.activitySignStartTime = this.activityInfo.activitySignStartTime.substring(0, 10)
        this.activityInfo.activitySignEndTime = this.activityInfo.activitySignEndTime.substring(0, 10)
        this.activityInfo.activityConStartTime = this.activityInfo.activityConStartTime.substring(0, 10)
        this.activityInfo.activityConEndTime = this.activityInfo.activityConEndTime.substring(0, 10)
        if (new Date(this.activityInfo.activitySignStartTime).getTime() > Date.now()) {
          this.card = 1
          this.updateTime()
        } else if (new Date(this.activityInfo.activitySignStartTime).getTime() < Date.now() &&
            new Date(this.activityInfo.activitySignEndTime).getTime() > Date.now()) {
          this.card = 2
          this.updateTime()
        } else if (new Date(this.activityInfo.activitySignEndTime).getTime() < Date.now() &&
            new Date(this.activityInfo.activityConStartTime).getTime() > Date.now()) {
          this.card = 3
          this.updateTime()
        } else if (new Date(this.activityInfo.activityConStartTime).getTime() > Date.now()) {
          this.card = 4
          this.updateTime()
        }
      })
      getActivityRule(this.receivedAid).then((res) => {
        this.actOtherInfo1 = res
      })
      getUserNum(this.receivedAid).then((res) => {
        this.userList = res
        res.forEach((item) => {
          if (item.gender === '男') { this.maleNum = this.maleNum + 1 }
          if (item.gender === '女') { this.femaleNum = this.femaleNum + 1 }
        })
        this.genderTable.push({name: '男', value: this.maleNum}, {name: '女', value: this.femaleNum})
      })
    },
    updateTime () {
      if (this.card === 1) {
        this.day = Math.floor((new Date(this.activityInfo.activitySignStartTime).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
      } else if (this.card === 2) {
        this.day = Math.floor((new Date(this.activityInfo.activitySignEndTime).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
        this.hour = Math.floor(((new Date(this.activityInfo.activitySignEndTime).getTime() - Date.now()) %
            (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        console.log(this.hour)
        this.minute = Math.floor(((new Date(this.activityInfo.activitySignEndTime).getTime() - Date.now()) %
            (1000 * 60 * 60)) / (1000 * 60))
      } else if (this.card === 3) {
        this.day = Math.floor((new Date(this.activityInfo.activityConStartTime).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
      } else if (this.card === 4) {
        this.$message({
          message: '来晚了哦，活动已开始或结束了',
          type: 'warning'
        })
      }
    },
    signUp () {
      getActivityById(this.receivedAid).then(result => {
        const activity = result
        if (activity.activityMaxNum === activity.activityNum) {
          this.$message.error('人数以满')
        } else {
          joinMiddleSchool(activity.id).then(result => {
            this.joinMiddleSchool = result
          })
          this.selectedActivity = activity
          this.dialogVisible = true
        }
      })
    },
    resetForm () {
      this.selectedSchool = ''
    },
    insertStudentLocation (selectedOptions) {
      this.studentLocation.uid = this.userId
      if (selectedOptions.length === 3) {
        this.studentLocation.province = selectedOptions[0]
        this.studentLocation.city = selectedOptions[1]
        this.studentLocation.district = selectedOptions[2]
      } else if (selectedOptions.length === 2) {
        this.studentLocation.province = selectedOptions[0]
        this.studentLocation.city = selectedOptions[1]
      } else if (selectedOptions.length === 1) {
        this.studentLocation.province = selectedOptions[0]
      }
    },
    submitForm () {
      this.studentLocation.aid = this.receivedAid
      this.dialogVisible = false
      Join(this.userId, this.receivedAid).then(res => {
        insertStudentSchool(this.userId, this.receivedAid, this.selectedSchool)
        insertStudentLocation(this.studentLocation)
        if (res === ('成功')) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        }
      })
      this.reload()
    }
  },
  created () {
    this.receivedAid = this.$route.params.actId
    setInterval(this.updateTime, 1000 * 60)
  },
  mounted () {
    this.getImageByAid()
    this.getActivityInfo()
  },
  computed: {
    ...mapGetters({
      userType: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}
.image-container {
  display: flex;
  justify-content: center;
  flex: 2;
  margin-right: 10px; /* 根据需要调整右边距 */
}
.text-container {
  flex: 2; /* 使文字部分占据更多空间 */
}
.my-carousel {
  width: 500px;
  margin-top: 30px;
}
.thumbnail {
  height: 100px;
  width: auto;
  margin-top: 10px;
  margin-left: 5px;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
.prev-button {
  text-align: left;
}
.next-button {
  position: absolute;
  left: 40.8%;
  margin-top: 87px;
}
.description1 {
  margin-top: 30px;
  margin-right: 15px;
}
.description2 {
  margin-top: 20px;
  margin-right: 15px;
}
.button0 {
  margin-top: 15px;
  height: 50px;
  width: 100px;
}
.my-label{
  width: 500px;
}
</style>
